<template>
  <div>
    <h1>日志管理</h1>
    <el-form :inline="true" :model="roleFm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="roleFm.username"></el-input>
      </el-form-item>
      <el-button @click="chaxun">查询</el-button>
    </el-form>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="用户操作"
        width="150">
      </el-table-column>
      <el-table-column
        prop="method"
        label="请求方法"
        width="300">
      </el-table-column>
      <el-table-column
        prop="params"
        label="请求参数"
        width="300">
      </el-table-column>
      <el-table-column
        prop="time"
        label="执行时长"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="ip地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间"
        width="120">
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="roleFm.pageNum"
      :page-size="roleFm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="roleFm.total"
      :page-count="roleFm.pageCount"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: 'logList',
  created() {
    this.logList()
  },
  data() {
    return {
      tableData: [],
      roleFm: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        pageCount: 1
      }
    }
  },
  methods: {
    logList() {
      axios.post('http://localhost:8200/sys/log/list', this.roleFm).then(res => {
        console.log(res)
        this.tableData = res.data.obj.records
        this.roleFm.pageNum = res.data.obj.current
        this.roleFm.pageSize = res.data.obj.size
        this.roleFm.total = res.data.obj.total
        this.roleFm.pageCount = res.data.obj.pages
      })
    },
    handleCurrentChange(val) {
      this.roleFm.pageNum = val
      this.logList()
    },
    chaxun() {
      this.roleFm.pageNum = 1
      this.logList()
    }
  }
}
</script>

<style scoped>

</style>
